{% extends "groups/base.html" %}

{% comment %}
<!--
  Copyright (C) 2010 ZHENG Zhong <http://www.zhengzhong.net/>
  Created on 2010-02-08.
  $Id$
-->
{% endcomment %}

{% load friday_extra %}

{#________________________________________________________________________________________________#}

{% block html_title %} {{ group|escape }} {% endblock %}

{#________________________________________________________________________________________________#}

{% block sidebar %}

  <!-- top posters of this month ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  {% if group.google_group %}

    <div class="section">

      <h2>Top Posters in {% now "N Y" %}:</h2>

      <div id="load-top-posters">
        <div class="ajax-loader">
          <img class="icon" src="{{ static_ }}/images/ajax_loader.gif" alt="Loading"/>
          Loading top posters...
        </div>
        <div class="ajax-error hidden">
          <img class="icon" src="{{ static_ }}/images/error.png" alt="Error"/>
          Failed to load top posters.
        </div>
      </div>

      <script type="text/javascript">//<![CDATA[
        $(function() {
          $("#load-top-posters").load(
            "{% url friday.view_top_posters group_uid=group.uid %}",
            function(response, textStatus) {
              if (textStatus == "error") {
                $("#load-top-posters .ajax-loader").hide();
                $("#load-top-posters .ajax-error").show();
              }
            }
          );
        });
      //]]></script>

    </div>

  {% endif %}

  <!-- navigation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  <div class="section">
    <h2>Navigation:</h2>
    <ul>
      <li><a href="{% url friday.view_group group_uid=group.uid %}">Group Home</a></li>
      <li><a href="{% url friday.view_members group_uid=group.uid %}">Members</a></li>
      <li><a href="{% url friday.view_hall_of_fame group_uid=group.uid %}">Hall of Fame</a></li>
      <li><a href="{% url friday.view_all_activities group_uid=group.uid %}">Activities</a></li>
      {% if group.google_group %}
        <li><a href="http://groups.google.com/group/{{ group.google_group }}">Google Group</a></li>
      {% endif %}
      {% if group.website %}
        <li><a href="{{ group.website }}">Website</a></li>
      {% endif %}
      {% if group_access.can_join %}
        <li><a href="{% url friday.join_group group_uid=group.uid %}">Join this group</a></li>
      {% endif %}
    </ul>
  </div>

  <!-- group owner ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  <div class="section">
    <div class="user-box">
      <div class="user-avatar">
        <a href="{% url friday.view_profile username=group.owner.username %}">
          <img src="{% url friday.view_avatar username=group.owner.username %}" alt="{{ group.owner|escape }}"/>
        </a>
      </div>
      <div class="user-info">
        Owned by
        <a href="{% url friday.view_profile username=group.owner.username %}">
          {{ group.owner|escape }}
        </a>
        <br/>
        since {{ group.own_date|date:"d N Y" }}
      </div>
      <div class="clear"></div>
    </div>
  </div>

  <!-- administration ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  {% if group_access.can_administrate %}
    <div class="section">
      <h2>Administration:</h2>
      <ul>
        <li><a href="{% url friday.edit_group group_uid=group.uid %}">Edit group information</a></li>
        <li><a href="{% url friday.prettify_group group_uid=group.uid %}">Prettify group page</a></li>
        <li><a href="{% url friday.view_members group_uid=group.uid %}">Manage members</a></li>
      </ul>
    </div>
  {% endif %}

{% endblock %}

{#________________________________________________________________________________________________#}

{% block content %}

  <div class="section">
    <h1>{{ group.name|escape }}</h1>
    <h5>{{ group.slogan|default:""|escape }}</h5>
  </div>

  <!-- group description ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  {% if group.description %}

    <div class="section">
      <h2>Group Description:</h2>
      {{ group.description|escape|linebreaks }}
    </div>

  {% endif %}

  <!-- pending members ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  {% if pending_members %}

    <div class="section">

      <h2>{{ pending_members.count }} pending member{{ pending_members.count|pluralize }}:</h2>

      <div class="user-list">

        {% for member in pending_members %}
          <div class="user">
            <div class="user-avatar">
              <a href="{% url friday.view_profile username=member.username %}">
                <img src="{% url friday.view_avatar username=member.username %}" alt="{{ member|escape }}"/>
              </a>
            </div>
            <div class="user-info">
              <a href="{% url friday.view_profile username=member.username %}">
                {{ member|escape }}
              </a>
              {% ifequal member.user user_ %}
                <b>(you)</b>
              {% endifequal %}
            </div>
          </div>
        {% endfor %}

        <div class="clear"></div>

      </div>

      {% if group_access.can_moderate %}
        <p>
          <a href="{% url friday.view_members group_uid=group.uid %}">
            &raquo; Review open requests
          </a>
        </p>
      {% endif %}

    </div>

  {% endif %}

  <!-- group members (incomplete list) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  <div class="section">

    <h2>{{ group.population }} members:</h2>

    <div class="user-list">

      {% for member in new_members %}
        <div class="user">
          <div class="user-avatar">
            <a href="{% url friday.view_profile username=member.username %}">
              <img src="{% url friday.view_avatar username=member.username %}" alt="{{ member|escape }}"/>
            </a>
          </div>
          <div class="user-info">
            <a href="{% url friday.view_profile username=member.username %}">
              {{ member|escape }}
            </a>
            {% ifequal member.user user_ %}
              <b>(you)</b>
            {% endifequal %}
          </div>
        </div>
      {% empty %}
        <p class="na">No members found.</p>
      {% endfor %}

      <div class="clear"></div>

    </div>

    <p><a href="{% url friday.view_members group_uid=group.uid %}">&raquo; More members</a></p>

  </div>

  <!-- auto-loaded upcoming activities ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  <div class="section">

    <h2>Upcoming activities:</h2>

    <div id="load-upcoming-activities">
      <div class="ajax-loader">
        <img class="icon" src="{{ static_ }}/images/ajax_loader.gif" alt="Loading"/>
        Loading upcoming activities...
      </div>
      <div class="ajax-error hidden">
        <img class="icon" src="{{ static_ }}/images/error.png" alt="Error"/>
        Failed to load upcoming activities.
      </div>
    </div>

    <script type="text/javascript">//<![CDATA[
      $(function() {
        $("#load-upcoming-activities").load(
          "{% url friday.view_upcoming_activities group_uid=group.uid %}",
          function(response, textStatus) {
            if (textStatus == "error") {
              $("#load-upcoming-activities .ajax-loader").hide();
              $("#load-upcoming-activities .ajax-error").show();
            }
          }
        );
      });
    //]]></script>

    <p><a href="{% url friday.view_all_activities group_uid=group.uid %}">&raquo; More activities</a></p>

  </div>

{% endblock %}

